<template>
    <div class="login">
        <Header>
            <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
            <div class="login-title">注册</div>
            <template v-slot:icon-r><img src="@/assets/images/home.png" alt="" class="icons"></template>
        </Header>
        <section>
            <div>
                <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*">
            </div>
            <div class="checkout">
                <input type="text" placeholder="请输入验证码" pattern="[0-9]*" v-model="codeVal">
                <button @click="sendCode" :disabled="disabled">{{ this.msgCode }}</button>
            </div>
            <div>
                <input type="password" v-model="userPwd" placeholder="请设置密码" pattern="[0-9]*">
            </div>
            <div class="login-btn" @click="register">注册</div>
        </section>
    </div>
</template>
  
<script>
import Header from '@/components/common/Header.vue'
import { Toast } from 'vant';
import { mapMutations } from 'vuex';
export default {
    components: {
        Header
    },
    data() {
        return {
            userTel: '',
            userPwd: '',
            rules: {
                //手机验证规则
                userTel: {
                    rule: /^1[23456789]\d{9}$/,
                    msg: '手机号不能为空,并且是11位数字'
                },
                //密码验证规则
                userPwd: {
                    rule: /^\w{6,12}$/,
                    msg: '密码不能为空,并且要求6-12位'
                }
            },
            //发送短信按钮禁用
            disabled: false,
            //倒计时
            codeNum: 6,
            //获取验证码按钮内容
            msgCode: '获取短信验证码',
            //随机验证码
            code: null,
            //用户输入验证码
            codeVal: ''
        }
    },
    computed: {},
    watch: {},
    methods: {
        goBack() {
            this.$router.back()
        },
        goUserLogin() {
            this.$router.push({ name: 'userLogin' })
        },
        //发送短信验证码
        sendCode() {
            //生成验证码
            this.code = Math.floor(Math.random() * 9000 + 1000)
            //验证手机号格式
            if (!this.validate('userTel')) return
            //发送验证码请求
            this.$axios({
                url: 'http://dfsns.market.alicloudapi.com/data/send_sms',
                method: 'post',
                headers: {
                    Authorization: "APPCODE b44e5ef6db81492490a354db1efba8ff"
                },
                data: {
                    content: `code:${this.code}`,
                    template_id: 'TPL_0000',
                    phone_number: this.userTel
                }
            }).then(res => {
                if (res.status == 200) {
                    Toast('验证码已发送')
                }
            })
            //禁用按钮
            this.disabled = true
            let timer = setInterval(() => {
                //倒计时
                this.msgCode = `${this.codeNum} 后重新发送`
                this.codeNum = --this.codeNum
                if (this.codeNum < 0) {
                    clearInterval(timer)
                    this.msgCode = `获取短信验证码`
                    this.codeNum = 6
                    this.disabled = false
                }
            }, 1000);
        },
        //校验
        validate(key) {
            let bool = true
            if (!this.rules[key].rule.test(this[key])) {
                //提示信息
                Toast(this.rules[key].msg)
                bool = false
                return false
            }
            return bool
        },
        //注册
        register() {
            //验证码错误
            if (!this.validate('userTel')) return
            if (!this.validate('userPwd')) return
            if (!this.codeVal) return Toast('请输入验证码')
            if (this.code != this.codeVal) return Toast('验证码错误')
            //验证码正确,开始注册
            this.$axios({
                url: '/api/register',
                method: 'post',
                data: {
                    phone: this.userTel,
                    userPwd: this.userPwd
                }
            }).then(res => {
                if (!res) return
                Toast(res.data.msg)
                //注册成功,存储个人信息
                this.USER_LOGIN(res.data.data)
                this.$router.push({ name: 'my' })
            })
        },
        ...mapMutations([
            'USER_LOGIN'
        ])
    },
    created() { },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.login {
    .header {
        color: #fff;

        .login-title {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 20%);
            color: #fff;
        }

        .icons {
            width: .8rem;
            height: .8rem;
        }

        ::v-deep .icon-l {
            width: auto;
        }
    }

    section {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 3.2rem);
        align-items: flex-start;
        padding: .5333rem;

        div {
            width: 100%;
            height: 1.1733rem;
            margin-top: .5rem;
            border-radius: 3px;
            box-shadow: 0 0 0 1px #d7d7d7;

            input {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0 .2667rem;
                background-color: #fff;
            }
        }

        .login-btn {
            border: none;
            margin-top: .5rems;
            background-color: #b0352f;
            width: 100%;
            height: 1.2rem;
            border-radius: .08rem;
            color: #fff;
            text-align: center;
            line-height: 1.2rem;
        }

        .checkout {
            display: flex;
            justify-content: space-between;

            button {
                font-size: .3733rem;
                width: 5.4rem;
                background-color: #b0352f;
                border: none;
                border-radius: 3px;
                color: #fff;
            }
        }
    }
}
</style>
  